import React from "react";
import Tab from "../Tab/Tab";
import { Carousel } from "antd";
import { get_lunbo } from "../../utils/api";
import "./Home.scss";
import { useState, useEffect } from "react";
import Broadcast from "../Broadcast/Broadcast";
import Hotcourse from "../Hotcourse/Hotcourse";
import ImgTextCourse from "../ImgTextCourse/ImgTextCourse";
import RecommandInfo from "../RecommandInfo/RecommandInfo";
import "antd/dist/antd.css";
function Home() {
  // 保存首页轮播图数据
  const [lunboList, setLunBo] = useState();
  useEffect(() => {
    async function init() {
      let { data: lunboData } = await get_lunbo();
      // console.log("获取轮播图", lunboData);
      setLunBo(lunboData);
    }
    init();
  }, []);
  // const contentStyle = {
  //   height: "160px",
  //   color: "#fff",
  //   lineHeight: "160px",
  //   textAlign: "center",
  //   background: "#364d79",
  // };
  return (
    <div className="Home">
      <div className="lunbo">
        <Carousel autoplay>
          {lunboList &&
            lunboList.map((lunbo) => (
              <div key={lunbo.id}>
                <img src={"https://ss.lanqb.com/" + lunbo.picture} alt="" />
              </div>
            ))}
        </Carousel>
      </div>
      <div className="subTab">
        <div className="tab_item">
          <img
            src="https://assets-cdn.lanqb.com/imgv3_m/images-icon/h-submenu01.png"
            alt=""
          />
          <p>免费教程</p>
        </div>
        <div className="tab_item">
          <img
            src="https://assets-cdn.lanqb.com/imgv3_m/images-icon/h-submenu04.png"
            alt=""
          />
          <p>教程兑换</p>
        </div>
        <div className="tab_item">
          <img
            src="https://assets-cdn.lanqb.com/imgv3_m/images-icon/h-submenu15.png"
            alt=""
          />
          <p>大触来了</p>
        </div>
        <div className="tab_item">
          <img
            src="https://assets-cdn.lanqb.com/imgv3_m/images-icon/h-submenu21.png"
            alt=""
          />
          <p>品牌实况</p>
        </div>
      </div>
      <div className="live_broadcast">
        <Broadcast></Broadcast>
      </div>
      <div className="hot_courses">
        <Hotcourse></Hotcourse>
      </div>
      <div className="bottom">
        <Tab></Tab>
      </div>
      <div className="img_text_course">
        <ImgTextCourse> </ImgTextCourse>
      </div>
      <div className="recommand_info">
        <RecommandInfo></RecommandInfo>
      </div>
    </div>
  );
}
export default Home;
